<template>
  <div class="vip">
    <header>
      <span @click="$back()">
        <el-icon color="#fff" size="18">
          <ArrowLeftBold />
        </el-icon>
      </span>
      <strong>{{ $t("language.vip.name") }}</strong>
      <span @click="$openPage('/kefu')">
        <NuxtImg src="/img/kefu.png" alt="" />
      </span>
    </header>
    <main>

      <template v-if="vip.vipinfo.currentRank > 0">
        <div class="process">
          <div class="left">
            <NuxtImg class="bg" src="/img/vipbg.png" alt="" />
            <NuxtImg class="icon" src="/img/vipicon.png" alt="" />
            <span>VIP{{ iconindex }}</span>
          </div>

          <div class="right">
            <ClientOnly>
              <el-progress color="#fff" :stroke-width="15"
                :percentage="percentage(vip.vipinfo.currentVipRecharge, vip['vips'][iconindex]?.highest)"></el-progress>
            </ClientOnly>
            <strong>{{ vip.vipinfo.currentVipRecharge / 100 + '/' + vip['vips'][iconindex]?.highest / 100 }}</strong>
            <span>VIP{{ iconindex + 1 >= vip.vips.length ? iconindex : iconindex + 1 }}</span>
          </div>
        </div>
        <div class="module1" style="margin: 10px 0 0 0;">
          <h2>{{ $t("language.vip.module2") }}</h2>
          <p>1.{{ $t("language.vip.text1") }}R${{ $dot(vip['vips'][iconindex]?.highest)
            }}</p>
          <!-- <p>2.{{ $t("language.vip.text2") }}</p> -->
        </div>
      </template>
      <!-- <div class="warn" @click="openwarn">
      <el-icon>
        <QuestionFilled color="#b5bac8" />
      </el-icon>
    </div> -->
      <div class="create">
        <h3 v-if="vip.vipinfo.currentRank == 0">{{ $t("language.vip.title") }}</h3>
        <el-button @click="$openPage('/rechange')">{{
        $t("language.vip.btnname")
      }}</el-button>
      </div>
      <h3>{{ $t("language.vip.viptitle") }}</h3>
      <template v-if="vip.vips.length != 0">
        <div class="imglist">
          <template v-for="(item, index) in vip.vips" :key="index">
            <div class="imgitem" @click="iconindex = index" :class="iconindex == index ? 'scale' : ''">
              <NuxtImg src="/img/vip_01.png" alt="" />
              <span>V{{ index }}</span>
            </div>
          </template>
        </div>
        <dl>
          <dd>
            <NuxtImg src="/img/vip_02.png" alt="" />
            <div>
              <span>{{ $t("language.vip.icon1") }}</span><strong>R${{ $dot(vip['vips'][iconindex]?.upgradeBonus)
                }}</strong>
            </div>
          </dd>
          <dd>
            <NuxtImg src="/img/vip_03.png" alt="" />
            <div>
              <span>{{ $t("language.vip.icon2") }}</span><strong>{{ vip['vips'][iconindex]?.todayTimesLimit
                }}</strong>
            </div>
          </dd>
          <dd>
            <NuxtImg src="/img/vip_04.png" alt="" />
            <div>
              <span>{{ $t("language.vip.icon3") }}</span><strong>{{ vip['vips'][iconindex]?.withdrawalRate
                }}%</strong>
            </div>
          </dd>
          <dd>
            <NuxtImg src="/img/vip_05.png" alt="" />
            <div>
              <span>{{ $t("language.vip.icon4") }}</span><strong>R${{ $dot(vip['vips'][iconindex]?.todayAmountLimit)
                }}</strong>
            </div>
          </dd>
        </dl>
      </template>

      <div class="module1">
        <h2>{{ $t("language.vip.module2") }}</h2>
        <p>1.{{ $t("language.vip.text1") }}R${{ $dot(vip['vips'][iconindex]?.highest)
          }}</p>
        <!-- <p>2.{{ $t("language.vip.text2") }}</p> -->
      </div>
      <!-- <div class="module2">
      <h2>{{ $t("language.vip.module3") }}</h2>
      <p>{{ $t("language.vip.text3") }}</p>
    </div> -->
    </main>
    <!-- <warntip ref="warnt"></warntip> -->
  </div>

</template>
<script setup lang="ts">

import { ArrowLeftBold } from '@element-plus/icons-vue'
import {
  ref,
  reactive,
  computed,
  nextTick
} from "vue";
// import warntip from "@/components/warn.vue";
// const { proxy } = getCurrentInstance();
let store = useStore()
let info = computed(() => store.userinfo)
//获取vip信息
let vip: any = reactive({
  vips: [] as {
    grade: number,
    highest: number,
    lowest: number,
    name: string,
    todayAmountLimit: number,
    todayTimesLimit: number,
    upgradeBonus: number,
    withdrawalRate: number,
  }[],
  vipinfo: {} as {
    currentRank: number | string,
    currentVipRecharge: number | string,
    id: number | string,
    nextRank: number | string,
    upgradeNeedRecharge: number | string,
  }
});
let percentage = (data1: any, data2: any) => {
  return Number(data1) / Number(data2) * 100 > 100 ? 100 : Number(data1) / Number(data2) * 100
}
let iconindex = ref(0);
let initData = async () => {
  await nextTick()
  useAllData("VipWithdrawl", `/Basic/v1.0/User/VipWithdrawl`, { id: info.value.gameID }).then(({ data }: { data: any }) => {
    vip.vips = data.value.data.vips;
  });
  useAllData("User/Vip", `/UserCenter/v1.0/User/Vip`, { id: info.value.gameID }).then(({ data }: { data: any }) => {
    for (let key in data.value.data) {
      vip.vipinfo[key] = data.value.data[key]
    }
    console.log(vip.vipinfo, 'vip.vipinfo');


    iconindex.value = vip.vipinfo.currentRank
  });
}
initData()
// let warnt = ref(null);
let openwarn = () => {
  // console.log(warnt.value.open());

  // warnt.value.open();
};

</script>
<style scoped lang="scss">
:deep(.el-progress-bar__outer) {
  border-radius: 7.5px !important;
  background-color: #5a5d64 !important;
}

:deep(.el-progress-bar__inner) {
  background: rgb(0, 144, 109) !important;
  border-radius: 7.5px !important;
}

:deep(.el-progress__text) {


  display: none;

  // transform: translateX(-50%);

}

.vip {
  width: 100%;

  header {
    width: 100%;
    height: 45px;
    z-index: 8;
    position: fixed;
    left: 0;
    top: 0;
    @include flex(row, space-between, center);
    background-color: rgb(36, 39, 43);
    padding: 0 20px;
    color: #fff;

    span {
      display: block;
      @include flex(row, center, center);
      cursor: pointer;

      img {
        height: 28px;
        width: 28px;
      }
    }
  }

  main {
    padding: 45px 12px 90px;
    width: 100vw;
    min-height: 100vh;
    background-color: #1a1a1a;

    .warn {
      @include flex(row, flex-end, center);
      padding-top: 10px;
    }

    .process {
      padding-top: 10px;
      width: 100%;
      @include flex(row, flex-start, center);

      .left {
        width: 58px;
        height: 58px;
        position: relative;
        @include flex(column, center, center);
        z-index: 1;

        .bg {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          right: 0;
          z-index: 0;
        }

        .icon {
          width: 40px;
          position: static;
          z-index: 4;
        }

        span {
          width: 38px;
          position: static;
          z-index: 4;
          height: 14px;
          color: #fff;
          background-color: #0a906c;
          border-radius: 8px;
          @include flex(row, center, center);
          text-align: center;
          display: block;
          font-size: 12px;
        }

      }

      .right {
        flex: 1;
        margin-left: -20px;
        padding: 0 5px 0 25px;
        @include flex(row, flex-start, center);
        height: 40px;
        border-radius: 10px;
        background-color: #32353e;
        margin-right: 40px;
        position: relative;

        strong {
          position: absolute;
          left: 50%;
          font-weight: normal;
          font-size: 12px;
          color: #fff;
          transform: translate(-50%, 0);
        }

        :deep(.el-progress) {
          flex: 1;

        }

        span {
          color: #fff;
          font-size: 12px;
          padding-left: 5px;
        }

      }
    }

    .create {
      width: 100%;
      margin-top: 20px;

      h3 {
        font-size: 15px;
        color: #fff;
        text-align: center;
        padding-top: 10px;
        margin-bottom: 15px;
      }

      .el-button {
        background: #0a906c;
        display: block;
        color: #fff;
        outline: none;
        border: none;
        width: 155px;
        height: 32px;
        text-align: center;
        border-radius: 5px;
        margin: 0 auto;
        font-size: 12px;
      }
    }

    >h3 {
      font-size: 18px;
      color: #fff;
      font-weight: normal;
      margin-top: 20px;
    }

    .imglist {
      width: 100%;
      overflow-x: auto;
      height: 60px;
      padding: 0 10px;
      margin: 10px 0 20px;

      &::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
      }

      @include flex(row, flex-start, center);
      flex-wrap: nowrap;

      .imgitem+.imgitem {
        margin-left: 30px;
      }

      .imgitem {
        cursor: pointer;
        position: relative;
        transition: all 0.4s;
        transform: scale(1);
        min-width: 50px;
        height: 45px;
        @include flex(row, center, center);

        img {
          width: 50px;
          height: 45px;
          opacity: 0.65;
          position: absolute;
          top: 0;
          left: 0;
        }

        span {
          font-size: 18px;
          text-align: center;
          color: #fff;
          position: static;
          z-index: 4;
        }
      }

      .scale {
        transform: scale(1.18);

        img {
          opacity: 1;
        }
      }
    }

    dl {
      @include flex(row, space-between, center);
      width: 100%;
      flex-wrap: wrap;
      margin-top: 10px;
      border-bottom: 1px solid #4a4c53;

      dd {
        width: 50%;
        margin-bottom: 30px;
        @include flex(row, flex-start, center);

        img {
          width: 38px;
          margin-right: 10px;
        }

        div {
          @include flex(column, center, flex-start);

          span {
            font-size: 12px;
            color: #fff;
            white-space: nowrap;
          }

          strong {
            font-size: 15px;
            color: #b5bac8;
            display: block;
            margin-top: 4px;
          }
        }
      }
    }

    .module1 {
      margin-top: 20px;

      h2 {
        font-size: 15px;
        color: #fff;
        font-weight: normal;
        margin-bottom: 4px;
      }

      p {
        font-size: 12px;
        color: #b5bac8;
        padding-left: 10px;
      }
    }

    .module2 {
      margin-top: 30px;
      padding-left: 10px;

      h2 {
        font-size: 15px;
        color: #fff;
        font-weight: normal;
        margin-bottom: 15px;
      }

      p {
        font-size: 12px;
        color: #b5bac8;
        line-height: 22px;
      }
    }
  }
}
</style>
